<svelte:options immutable={true} />

<script lang="ts">
  import { request, gql } from "graphql-request";

  import { actixGraphqlEndpoint } from "$lib/js/stores";
  import { useQuery, useMutation } from "@sveltestack/svelte-query";

  import type { TaskType } from "$lib/ebm";

  export let task: TaskType;
  export let index = 0;
  let correct = "";
  let answer = "";

  let endpoint = $actixGraphqlEndpoint;

  const ANSWER_TASK_QUIZITEM_MUTATION = gql`
    mutation {
      task: answerTaskQuizitem(
        input: { taskId: "task:task001", stdAnswer: "k1", answer: "k2" }
      ) {
        id
        ver
        subject
        title
        description
        contentId
        createdAt
        updatedAt
        status
        from
      }
    }
  `;

  const mutation = useMutation<TaskType, { message: string }>(async () => {
    const { quiz } = await request(endpoint, ANSWER_TASK_QUIZITEM_MUTATION);
    return quiz;
  });
</script>

<div
  class="relative h-14 col-span-4 text-black bg-gray-300 
    items-center flex p-2 pr-10 line-clamp-2 "
>
  <i class="absolute top-1 right-1 h-8 w-8 fas fa-camera text-2xl" />
  <div class="w-full h-full flex-row">
    <span class="font-bold float-left sm:float-right mr-4 uppercase">
      {task.content.title}
    </span>
    <p class="block mt-0">
      (std={task.content.stdAnswer}) {task.content.description}
      {#if $mutation.isLoading}
        Answering Task QuizItem ...
      {:else if $mutation.isError}
        An error occurred: {$mutation.error.message}
      {:else if $mutation.isSuccess}
        Answered Task QuizItem Successfully!
      {:else}
        Waiting for your answer ...
      {/if}
      Use float-left to float an element to the left of its containeUse float-left
      to float an element to the left of its containerr.
    </p>
  </div>
  <span class="absolute bottom-2 right-3 text-sm">{index + 100}</span>
</div>

{#each task.content.options as option}
  <div
    id={task.id}
    data-option="a"
    class="relative flex"
    on:click={() => {
      if (correct === "") {
        correct = "false";
        answer = option.k;
        if (task.content.stdAnswer == answer) {
          correct = "true";
        }
        console.log("answer=", answer);
        $mutation.mutate();
      }
    }}
  >
    <button
      class="w-full h-14 p-2 text-white  line-clamp-2 {correct === ''
        ? 'bg-blue-400 hover:bg-green-700 cursor-pointer'
        : 'bg-gray-400 cursor-not-allowed'}"
    >
      {option.k}:{option.v}
    </button>
    {#if correct === "true" && option.k === answer}
      <i
        class="absolute top-0 right-1 fa-regular fa-circle-check text-green-800 text-xl bg-opacity-100"
      />
    {:else if correct === "false" && option.k === answer}
      <i
        class="absolute top-0 right-1 fa-regular fa-circle-xmark text-red-800 text-xl bg-opacity-100"
      />
    {:else if correct === "false" && option.k === task.content.stdAnswer}
      <i
        class="absolute top-0 right-1 fa-regular fa-circle-check text-green-800 text-xl bg-opacity-100"
      />
    {/if}
  </div>
{/each}
